<!-- 重置密码内容文件 -->
<template>
  <div class="resetPassword" v-loading="loading" :element-loading-text="text">
    <!-- 标题 -->
    <div class="title">
      <h3>重置密码</h3>
    </div>

    <div class="box">
      <el-form :model="userInfo" status-icon :rules="rules" ref="userInfo" label-width="100px" class="demo-ruleForm">
        <el-form-item label="原密码" prop="old_pwd">
          <el-input v-model="userInfo.old_pwd" placeholder="请输入原密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="new_pwd">
          <el-input type="password" v-model="userInfo.new_pwd" autocomplete="off" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="re_pwd">
          <el-input type="password" v-model="userInfo.re_pwd" autocomplete="off" placeholder="请再次输入新密码"></el-input>
        </el-form-item>
        <el-form-item class="btn-box">
          <!-- 提交按钮 -->
          <el-button class="addArticleColoe screen" size="medium" type="primary" @click="submit">提交修改</el-button>
          <!-- 重置按钮 -->
          <el-button class="reset" type="info" size="medium" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { UpdatePassword } from '@/api/user'
import store from '@/store'

export default {
  name: 'resetPassword',
  created () {
    store.commit('user/NewSetToken', localStorage.getItem('token'))
    this.loading = true
    this.$emit('setIndexisSHow', true)
    this.loading = false
  },
  data () {
    // 正则规则
    const reg = /^[\w]{6,15}$/
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!reg.test(value)) {
        callback(new Error('长度必须为 6 ~ 15位，可包含字母数字'))
      } else {
        if (this.userInfo.re_pwd !== '') {
          this.$refs.userInfo.validateField('re_pwd')
        }
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.userInfo.new_pwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      text: '页面加载中...',
      userInfo: {
        new_pwd: '',
        re_pwd: '',
        old_pwd: ''
      },
      rules: {
        new_pwd: [
          { required: true, validator: validatePass, trigger: ['change', 'blur'] }
        ],
        re_pwd: [
          { required: true, validator: validatePass2, trigger: ['change', 'blur'] }
        ],
        old_pwd: [
          { required: true, message: '请输入原密码', trigger: ['change', 'blur'] }
        ]
      }
    }
  },
  methods: {
    async submit () {
      this.text = '提交数据更新中,请稍等...'
      this.loading = true
      await this.$refs.userInfo.validate()
      const res = await UpdatePassword(this.userInfo)
      if (res.data.message === '更新密码成功！') {
        this.$message({
          message: res.data.message,
          type: 'success'
        })
        this.reset()
        this.loading = false
      } else {
        this.$message.error(res.data.message)
        this.loading = false
      }
    },
    async reset () {
      await this.$refs.userInfo.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  padding: 30px 0px;
  height: 272px;
  background-color: #ffffff;
  border-radius: 0px 0px 4px 4px;
}

/deep/ .el-form-item {
  display: flex;
  align-items: center;

  .el-form-item__content {
    margin-left: 0px !important;

    .el-input__inner {
      width: 400px;
      height: 40px;
      line-height: 40px;
    }
  }

  /deep/ .el-form-item__label {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.90);
    line-height: 22px;
    font-weight: 400;
  }
}

.addArticleColoe {
  background: #4F81FF;
  border-radius: 3px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.90);
  text-align: center;
  font-weight: 400;
  border: 0px;
}

.addArticleColoe:hover {
  background: #608DFF;
}

.reset {
  background: #EAECF5;
  border-radius: 3px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #0052D9;
  text-align: center;
  font-weight: 400;
  border: 0px;
}

.btn-box {
  margin-left: 100px;
}
</style>
